<template>
    <a-modal
      :title="title"
      :visible="articleVisible"
      :confirm-loading="confirmLoading"
      @cancel="cancel"
      @ok="ok"
    >
    
    <a-form-model ref="editarticleModel"  :model="articleFormDatas"  layout="vertical" 
    :labelCol="{span: 6}" :wrapperCol="{span: 16}">
      <div class="fromblock">
        <div class="fromblock_blocks">
          <a-form-model-item  label="标题" prop="title">
            <a-input v-model="articleFormDatas.title"  placeholder="请输入标题" />
          </a-form-model-item>
        </div>
        <div class="fromblock_blocks">
        <a-form-model-item label="状态" >
          <a-radio-group v-model="articleFormDatas.status">
            <a-radio :value="1"> 正常 </a-radio>
            <a-radio :value="0"> 禁用 </a-radio>
          </a-radio-group>
        </a-form-model-item>
        </div>
      </div>
      <div class="fromblock">
        <div class="fromblock_blocks">
          <a-form-model-item label="类型" prop="category_id">
            <a-select v-model="articleFormDatas.category_id" placeholder="请选择类型">
              <a-select-option v-for="(item,index) in categorys" :key="index" :value="item.id">{{item.name}}</a-select-option>
            </a-select>
          </a-form-model-item>
        </div>
        <div class="fromblock_blocks">
          <a-form-model-item label="视频地址" prop="video_url">
            <a-input v-model="articleFormDatas.video_url"  placeholder="请输入视频地址" />
          </a-form-model-item>
        </div>
      </div>
      <div class="fromblock">
        <div class="fromblock_blocks">
        <a-form-model-item label="上传封面" prop="cover">          
          <upImages :url.sync="articleFormDatas.cover"></upImages>
        </a-form-model-item>
        </div>
        <div class="fromblock_blocks">
        <a-form-model-item label="上传视频" prop="video_url">
          <upImages type="video" :url.sync="articleFormDatas.video_url"></upImages>
        </a-form-model-item>
        </div>
      </div>
        <a-form-model-item :labelCol="{span: 2}" :wrapperCol="{span: 21}" label="描述" prop="description">
          <a-input v-model="articleFormDatas.description" type="textarea" placeholder="请输入描述" />
        </a-form-model-item>
        <a-form-model-item :labelCol="{span: 2}" :wrapperCol="{span: 21}" label="内容" prop="content">
          <quills :contents.sync="articleFormDatas.content"></quills>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </template>
  
  <script>
  import { editArticleListApi,addArticleListApi } from '@/api/brand.js'
  export default {
    props:['categorys'],
    data() {
      return {
        articleVisible:false,
        title:"添加",
        confirmLoading:false,
        loading:false,

        articleFormDatas:{
          ids:"",
          title:"",
          category_id:1,
          content:"",
          cover:"",
          description:"",
          href:"",
          video_url:"",
          status:1,
        }
      }
    },
    created() {
    },
    methods: {
      openeditArticle(json){
        this.articleFormDatas={
          ids:"",
          title:"",
          category_id:1,
          content:"",
          cover:"",
          description:"",
          href:"",
          video_url:"",
          status:1,
        }
          this.title='添加'
        if(json){
          this.title='修改信息'
          this.articleFormDatas=JSON.parse(JSON.stringify(json))
          this.articleFormDatas.ids=json.id
        }
        this.articleVisible=true
      },
      handleOk(){
        this.articleVisible=false
      },
      cancel(){
        this.handleOk()
      },
      ok(){
        this.$refs.editarticleModel.validate(valid => {
          if (valid) {
            if(this.articleFormDatas.ids){
              this.editLists()
            }else{
              this.addsLists()
            }
          }
        })
      },

      editLists(){
        editArticleListApi({...this.articleFormDatas,
        brand_id: process.env.VUE_APP_BRAND_ID}).then(res=>{
          this.$message.success("操作成功");
          this.handleOk()
          this.$emit("changes")
        })
      },
      addsLists(){
        addArticleListApi({...this.articleFormDatas,
        brand_id: process.env.VUE_APP_BRAND_ID}).then(res=>{
          this.$message.success("操作成功");
          this.handleOk()
          this.$emit("changes")
        })
      }


    }
  }
  </script>
  
  <style lang="less" scoped>
  .fromblock{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .fromblock_blocks{
      width: 48%;
    }
  }
  </style>
  